<script setup lang="ts">
import useNum from '@/hooks/useNum'
import useGoodObj from '@/hooks/useGoodObj'
import useName from '@/hooks/app/useName'
import useRefObj from '@/hooks/useRefObj'

let { num, changeNum } = useNum()
let { allName, firstName, lastName, changeLastName } = useName()
let { goodObj, changeGoodObj, changePartGoodObj } = useGoodObj()
let { kun, changeKunLike } = useRefObj()
</script>
<template>
  <div class="greetings">
    <h4>ref 对象的数据改变</h4>
    <p class="red">ref = {} 不会失去响应式 ，reactive ={} 失去响应式</p>
    <button @click="changeKunLike">changeKunLike</button>
    <p>kun: {{ kun }}</p>
    <br />
    <hr />

    <h4>computed (get/set) 使用</h4>
    <button @click="changeLastName">changeLastName</button>
    <p>useName:{{ firstName }}</p>
    <p>lastName:{{ lastName }}</p>
    <p>allName:{{ allName }}</p>
    <br />
    <hr />

    <h4>watch监听ref 基本 数据</h4>
    <button @click="changeNum">changeNum ++</button>
    <p>num:{{ num }}</p>
    <br />
    <hr />

    <h4>watch监听ref 对象 数据</h4>
    <button @click="changePartGoodObj">obj的a属性改变 --deep</button>
    <button class="ml10" @click="changeGoodObj">obj整体改变</button>
    <p>goodObj:{{ goodObj }}</p>
    <br />
    <hr />
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
